<template>
    <div>
        <headNav title="语音广播"></headNav>
        <div class="searchzchen">
            <div class="searchBox" :class="{'chang':!isSchoolAdmin && !isControl}">
                <img src="@/assets/img/homeWork/search.png" alt="">
                <input type="search" placeholder="搜索广播标题" v-model="keyWord" @keydown.enter.prevent="getBroadcast">
            </div>
            <div class="publish" v-if="isSchoolAdmin || isControl" @click="goPublish">发布广播</div>
        </div>
        <div class="changeType">
            <div class="voiceBo" :class="{'active':voiceType == 0}" @click="changeClass(0)"><span>一键广播</span><i></i></div>
            <div class="voiceBo" :class="{'active':voiceType == 1}" @click="changeClass(1)"><span>紧急通知</span><i></i></div>
        </div>
                 
                <div class="tableContent" ref="scroll" v-if="broadcastList.length != 0">
                    <infiniteScroll  @loadMore="loadMore">
                        <div class="oneItem" v-for="(item,index) in broadcastList" :key="index">
                            <p class="informTit">
                                <img class="titImg" v-if="item.broadCastMsg" src="@/assets/img/homeWork/text.png" alt="">
                                <img class="titImg" v-else src="@/assets/img/homeWork/guangbo.png" alt="">
                                <span>{{item.title}}</span>
                                <img class="jinjiText" v-if="item.broadCastType == 1" src="@/assets/img/homeWork/jinji.png" alt="">
                            </p>
                            <div class="voiceContent" v-if="item.broadCastMsg">
                                <img v-if="item.headImgUrl" :src="item.headImgUrl" alt="" :onerror="logo">
                                <img v-else src="@/assets/img/homeWork/head.png" alt="">
                                <div class="voiceList">
                                    <div class="audio-text">
                                        {{item.broadCastMsg}}
                                    </div>
                                </div>
                            </div>
                            <div class="voiceContent" v-else>
                                <img v-if="item.headImgUrl" :src="item.headImgUrl" alt="" :onerror="logo">
                                <img v-else src="@/assets/img/homeWork/head.png" alt="">
                                <div class="voiceList">
                                    <div class="audio-vbc" @click="play(item,index)">
                                        <img v-if="!item.isPlay"  src="@/assets/img/homeWork/a-1.png" alt="">
                                        <img v-else src="@/assets/img/homeWork/a-2.gif" alt="">
                                        <span style="color: #fff;">{{item.totalSeconds}}"</span>
                                        <span class="clickPlay">点击播放</span>
                                        <audio style="display:none" duration :src="item.originalUrl" :id="item.originalUrl" controls></audio>
                                    </div>
                                </div>
                            </div>
                            <div class="informDetail">
                                <span>{{item.name}}</span>
                                <label>{{item.createTime}}</label>
                            </div>
                        </div>
                        <div class="load-p">
                            <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                            <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                        </div>
                    </infiniteScroll>
                </div>
                <div class="zanImg" v-else>
                    <img src="@/assets/img/homeWork/zanwuData.png" alt="">
                    <p>暂无语音广播</p>
                </div>
       
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import infiniteScroll from '@/components/infiniteScroll'
import { LoadMore} from 'vux'
export default {
    components:{
        headNav,
        infiniteScroll,
        LoadMore,
    },
    computed: {
      isSchoolAdmin(){
        return this.$store.state.user.isSchoolAdmin
      }
    },
    data() {
        return {
            logo: 'this.src="' + require('@/assets/img/homeWork/head.png') + '"',
            lastid: '',
            pageIndex:0,
           pageSize:4,
           isMore:true,
           broadcastList:[],
           keyWord:'',
           voiceType:0,
           isControl:''
        }
    },
    watch:{
        keyWord(newVal,oldVue){
            // false  ===>   null 0 '' false undefined  NAN
           if(!newVal){
               this.isMore = true
               this.pageIndex = 0
               this.broadcastList = []
               this.getBroadcastList()
           }
        }
    },
    mounted(){
        this.getControl()
       this.getBroadcastList()
    },
    methods:{
        changeClass(num){
           this.voiceType = num
           this.isMore = true
            this.pageIndex = 0
            this.broadcastList = []
            this.getBroadcastList()
            this.lastid = ''
        },
        play (id,index) {
            if( this.lastid && this.lastid != id) {
                document.getElementById(this.lastid.originalUrl).pause()
                document.getElementById(this.lastid.originalUrl).load()
                this.lastid.isPlay =false
            }
            var music = document.getElementById(id.originalUrl)
            // this.time =Math.floor(music.duration)
            if (music.paused){
                music.play()
                id.isPlay = true
                this.lastid = id
                 this.broadcastList.splice(index,1,id)
            } else {
                music.pause()
                id.isPlay = false
                 this.broadcastList.splice(index,1,id)
            }
            var isend = document.getElementById(id.originalUrl)
            isend.addEventListener('ended', () => {  
                id.isPlay = false
                 this.broadcastList.splice(index,1,id)
            }, false)
          
        },
        goPublish(){
            this.$router.push('publish')
        },
        getBroadcast(){
            this.isMore = true
            this.pageIndex = 0
            this.broadcastList = []
            this.getBroadcastList()
        },
        // 获取广播记录
         getBroadcastList(){
             if(!this.isMore){
                return
            }
            this.pageIndex++
            var prams = {
                LoginUserId:this.$store.getters['user/loginUserId'],
                schoolId:this.$store.getters['user/schoolId'],
                PageNum:this.pageIndex,
                PageSize:this.pageSize,
                Title:this.keyWord,
                BroadCastType:this.voiceType
            }
            if(this.$store.getters['user/classId'] && !this.isSchoolAdmin){
                prams.ClassId = this.$store.getters['user/classId']
            }
            if(this.$store.getters['user/studentId']){
                prams.StudentId = this.$store.getters['user/studentId']
            }
            this.$store.dispatch('broadcast/GetVoiceBroadcast',prams).then((data) => {
                   if(data.items.length < this.pageSize){
                        this.isMore = false
                    }
                    this.broadcastList = this.broadcastList.concat(data.items)
              
            })
        },
        loadMore(){
            this.getBroadcastList()
        },
        // 检测是否有权限
        getControl(){
            var prams = {
                PermissionType:0,
                CheckAction:0,
                SchoolId:this.$store.getters['user/schoolId']
            }
             this.$store.dispatch('broadcast/CheckBroadcastPermission',prams).then((res) => {
                 if(res == 0){
                     this.isControl = true
                 }else{
                     this.isControl = false
                 }
                   
            })
        }
    }
}
</script>
<style  scoped>
.searchzchen{
    background: #fff;
    height: 1.2rem;
    overflow: hidden;
}
.searchBox{
    width:4.5rem;
    height:0.72rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(204,204,204,1);
    border-radius:0.36rem;
    margin: 0.24rem;
    line-height: 0.72rem;
    display: inline-block;
    margin-right: 0.1rem;
}
.searchBox img{
    width: 0.26rem;
    height: 0.26rem;
    margin-left: 0.2rem;
}
.searchBox input{
    font-size: 0.26rem;
}
.publish{
    width:2rem;
    height:0.72rem;
    line-height: 0.72rem;
    background:rgba(18,143,239,1);
    border-radius:0.36rem;
    display: inline-block;
    text-align: center;
    font-size: 0.26rem;
    color: #fff;
}
.informList{
    padding-bottom: 1rem;
}
.oneItem{
    width:6.72rem;
    background:rgba(255,255,255,1);
    border-radius:0.20rem;
    margin: 0 auto;
    margin-top: 0.24rem;
    overflow: hidden;
    padding-bottom: 0.3rem;
}
.informTit{
    line-height: 0.8rem;
    margin-left: 0.24rem;
    overflow: hidden;
}
.titImg{
    width: 0.26rem;
    height: 0.26rem;
    float: left;
    margin-top: 0.28rem;
    margin-right: 0.1rem;
    border-radius: 50%;
    object-fit: cover;
}
.informTit span{
    font-size: 0.26rem;
    float: left;
}
.voiceContent > img{
    width: 0.72rem;
    height: 0.72rem;
    margin-left: 0.24rem;
    float: left;
}
.voiceContent{
    overflow: hidden;
}
.voiceList{
    float: left;
    margin-left: 0.2rem;
}
.informDetail{
    margin-top: 0.2rem;
}
.informDetail span{
    color: #010101;
    font-size: 0.26rem;
    margin-left: 0.24rem;
}
.informDetail label{
    color: #999999;
    font-size: 0.26rem;
    margin-left: 0.1rem;
}
.audio-vbc {
    width: 3.8rem;
    height: 0.72rem;
    background: #128FEF;
    border-radius: 0.36rem;
    padding: 0.2rem 0 0 0.24rem;
    box-sizing: border-box;
    color: #fff;
}
.audio-vbc img{
   width: 0.24rem;
   height: 0.24rem;
}
.clickPlay{
    float: right;
    margin-right: 0.24rem;
    color: #fff;
    font-size: 0.24rem;
}
.tableContent{
        height: calc(100% - 3.08rem);
    }
.load-p{
        padding: 1rem 0 0 0;
    }
.zanImg img{
    width: 3.6rem;
    height: 3.04rem;
}
.zanImg{
    text-align: center;
    margin-top: 2rem;
}
.zanImg p{
    color: #999999;
    font-size: 0.26rem;
    margin-top: 0.4rem;
}
input[type="search"]::-webkit-search-cancel-button{
    display: none;
    -webkit-appearance: none;
}
/* 改 */
.changeType{
    height: 1rem;
    background-color: #fff;
    line-height: 1rem;
    font-size: 0.26rem;
    color: #CCCCCC;
}
.voiceBo{
    display: inline-block;
    margin-left: 0.75rem;
    position: relative;
}
.active{
    color: #000000 !important;
}
.active i{
    width:0.60rem;
    height:0.04rem;
    background:rgba(18,144,239,1);
    border-radius:0.02rem;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0.2rem;
}
.chang{
    width: 6.7rem !important;
}
.jinjiText{
    width: 0.98rem;
    height: 0.26rem;
    float: left;
    margin-top: 0.28rem;
    margin-left: 0.1rem;
}
.audio-text {
    width: 4.8rem;
    /* height: 0.72rem; */
    background: #128FEF;
    border-radius: 0.36rem;
    padding: 0.2rem;
    box-sizing: border-box;
    color: #fff;
    word-break: break-all;
}
</style>
